<div class="register-container">
  <div class="register-box">
    <!-- 头部标题 -->
    <div class="header">
      <h2>用户注册</h2>
      <p>创建您的博客账户</p>
    </div>

    <!-- 注册表单 -->
    <form nz-form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="register-form">
      <!-- 姓名 -->
      <nz-form-item>
        <nz-form-control [nzErrorTip]="getFieldError('name')">
          <nz-input-group nzPrefixIcon="user">
            <input
              type="text"
              nz-input
              formControlName="name"
              placeholder="请输入姓名"
              [class.error]="hasFieldError('name')"
            />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>

      <!-- 邮箱 -->
      <nz-form-item>
        <nz-form-control [nzErrorTip]="getFieldError('email')">
          <nz-input-group nzPrefixIcon="mail">
            <input
              type="email"
              nz-input
              formControlName="email"
              placeholder="请输入邮箱"
              [class.error]="hasFieldError('email')"
            />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>

      <!-- 密码 -->
      <nz-form-item>
        <nz-form-control [nzErrorTip]="getFieldError('password')">
          <nz-input-group nzPrefixIcon="lock">
            <input
              type="password"
              nz-input
              formControlName="password"
              placeholder="请输入密码"
              [class.error]="hasFieldError('password')"
            />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>

      <!-- 确认密码 -->
      <nz-form-item>
        <nz-form-control [nzErrorTip]="getFieldError('confirmPassword')">
          <nz-input-group nzPrefixIcon="lock">
            <input
              type="password"
              nz-input
              formControlName="confirmPassword"
              placeholder="请确认密码"
              [class.error]="hasFieldError('confirmPassword')"
            />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>

      <!-- 用户协议 -->
      <nz-form-item>
        <nz-form-control [nzErrorTip]="getFieldError('agree')">
          <label nz-checkbox formControlName="agree">
            我已阅读并同意<a href="#" (click)="$event.preventDefault()">用户协议</a>和<a href="#" (click)="$event.preventDefault()">隐私政策</a>
          </label>
        </nz-form-control>
      </nz-form-item>

      <!-- 提交按钮 -->
      <nz-form-item>
        <button
          nz-button
          nzType="primary"
          nzBlock
          [nzLoading]="loading"
          [disabled]="!registerForm.valid"
          type="submit"
        >
          {{ loading ? '注册中...' : '注册' }}
        </button>
      </nz-form-item>

      <!-- 登录链接 -->
      <div class="login-link">
        已有账户？<a (click)="goToLogin()">立即登录</a>
      </div>
    </form>
  </div>
</div> 